<template>
	<view class="wrapper">
		<!-- #ifndef MP-WEIXIN -->
		<navBar title="我的" :isIndex="true"></navBar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<midell-box :current-page="2"></midell-box>
		<!-- #endif -->

		<view class="main">
			<!-- 用户模块 -->
			<view class="user" v-if="userInfo">
				<view class="user_l"><image :src="userInfo.avatar"></image></view>
				<view class="user_r">
					<text class="uname">{{ userInfo.name }}</text>
					<text class="phone">账号：{{ userInfo.phone }}</text>
					<text class="word">个性签名：{{ userInfo.desc }}</text>
				</view>
			</view>
			<!-- 修改个人信息 -->
			<view class="change">
				<navigator class="itembox" url="/subpages/editPerson/editPerson">
					<view class="itembox_l">
						<view class="icon"><u-icon name="setting" size="6vw" color="#9ca8b8"></u-icon></view>
						<text>修改个人信息</text>
					</view>
					<view class="itembox_r"><u-icon name="arrow-right" size="6vw" color="#9ca8b8"></u-icon></view>
				</navigator>
			</view>
			<!-- 功能模块 -->
			<view class="tool">
				<navigator class="itembox" url="/subpages/myBlogs/myBlogs?title=myblogs">
					<view class="itembox_l">
						<view class="icon"><u-icon name="file-text" size="6vw" color="#9ca8b8"></u-icon></view>
						<text>我的博客</text>
					</view>
					<view class="itembox_r"><u-icon name="arrow-right" size="6vw" color="#9ca8b8"></u-icon></view>
				</navigator>
				<navigator class="itembox" url="/subpages/myBlogs/myBlogs?title=myfocus">
					<view class="itembox_l">
						<view class="icon"><u-icon name="heart" size="6vw" color="#9ca8b8"></u-icon></view>
						<text>我的关注</text>
					</view>
					<view class="itembox_r"><u-icon name="arrow-right" size="6vw" color="#9ca8b8"></u-icon></view>
				</navigator>
				<navigator class="itembox" url="/subpages/myBlogs/myBlogs?title=mylike">
					<view class="itembox_l">
						<view class="icon"><u-icon name="thumb-up" size="6vw" color="#9ca8b8"></u-icon></view>
						<text>我赞过的</text>
					</view>
					<view class="itembox_r"><u-icon name="arrow-right" size="6vw" color="#9ca8b8"></u-icon></view>
				</navigator>
				<navigator class="itembox" url="/subpages/myBlogs/myBlogs?title=myhistory">
					<view class="itembox_l">
						<view class="icon"><u-icon name="list" size="6vw" color="#9ca8b8"></u-icon></view>
						<text>浏览记录</text>
					</view>
					<view class="itembox_r"><u-icon name="arrow-right" size="6vw" color="#9ca8b8"></u-icon></view>
				</navigator>
			</view>
			<!-- 注销 -->
			<u-button @click="exit" color="#c1cbd7" shape="circle" text="注销"></u-button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {};
	},
	methods: {
		// 注销
		exit() {
			uni.showModal({
				title: '提示',
				content: '退出账号并返回登录页',
				success: res => {
					if (res.confirm) {
						uni.removeStorageSync('userInfo');
						this.$store.state.userInfo = null;
						uni.redirectTo({
							url: '/subpages/login/login'
						});
					} else if (res.cancel) {
					}
				}
			});
		}
	},
	computed: {
		...mapState(['userInfo'])
	}
};
</script>

<style scoped lang="scss">
.wrapper {
	background-color: #f5f5f5;
	/* #ifndef APP */
	height: calc(100vh - 50px);
	/* #endif */
	/* #ifdef APP */
	height: 100vh;
	/* #endif */
}
.main {
	width: 100%;
	padding-top: 1.5vh;
	.user {
		display: flex;
		width: 94%;
		border-radius: 3vw;
		margin: 0 auto;
		padding: 1.5vh 0;
		background-color: #fff;
		.user_l {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 20vw;
			image {
				width: 15vw;
				height: 15vw;
				border-radius: 50%;
			}
		}
		.user_r {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 73%;
			color: #666;
			.phone {
				margin: 0.5vh 0;
			}
		}
	}
	.change {
		overflow: hidden;
		background-color: #fff;
		width: 94%;
		border-radius: 3vw;
		margin: 1.5vh auto 0;
	}
	.itembox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 3vw;
		.itembox_l {
			display: flex;
			align-items: center;
			color: #666;
			.icon {
				margin-right: 1vw;
			}
		}
	}
	.tool {
		overflow: hidden;
		background-color: #fff;
		width: 94%;
		border-radius: 3vw;
		margin: 1.5vh auto 0;
	}
	::v-deep .u-button {
		margin-top: 1.5vh;
		width: 94%;
	}
}
</style>
